<template>
  <div
    class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/50 to-indigo-50"
  >
    <!-- Enhanced Header -->
    <header
      class="border-b bg-white/70 backdrop-blur-xl sticky top-0 z-50 shadow-sm"
    >
      <div class="container mx-auto px-4 py-6">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-4">
            <motion.div
              :while-hover="{
                scale: 1.05,
                rotate: 5,
                transition: { duration: 0.2 },
              }"
              class="w-12 h-12 bg-gradient-to-br from-slate-600 via-gray-700 to-slate-800 rounded-xl flex items-center justify-center shadow-lg"
            >
              <Brain class="w-7 h-7 text-white" />
            </motion.div>
            <div>
              <h1
                class="text-3xl font-bold bg-gradient-to-r from-slate-700 via-gray-800 to-slate-900 bg-clip-text text-transparent"
              >
                {{ t("headComponent.title") }}
              </h1>
              <p class="text-slate-600">{{ t("headComponent.subtitle") }}</p>
            </div>
          </div>

          <div class="flex items-center gap-4">
            <LanguageSelector />
            <!-- Quick Stats -->
            <div class="hidden md:flex items-center gap-6">
              <motion.div
                :transition="{ duration: 0.2 }"
                :while-hover="{ scale: 1.05 }"
                class="text-center"
              >
                <div
                  class="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
                >
                  {{ testResults.length }}
                </div>
                <div class="text-xs text-slate-500">
                  {{ t("homePage.completedTests") }}
                </div>
              </motion.div>
              <motion.div
                :transition="{ duration: 0.2 }"
                :while-hover="{ scale: 1.05 }"
                class="text-center"
              >
                <div
                  class="text-xl font-bold bg-gradient-to-r from-emerald-600 to-green-600 bg-clip-text text-transparent"
                >
                  {{ userProfile.averageScore }}
                </div>
                <div class="text-xs text-slate-500">
                  {{ t("homePage.averageScore") }}
                </div>
              </motion.div>
              <motion.div
                v-if="aiBattleResults.length > 0"
                :transition="{ duration: 0.2 }"
                :while-hover="{ scale: 1.05 }"
                class="text-center"
              >
                <div
                  class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent"
                >
                  {{ aiBattleWinRate }}%
                </div>
                <div class="text-xs text-slate-500">
                  {{ t("homePage.aiWinRate") }}
                </div>
              </motion.div>
              <motion.div
                :transition="{ duration: 0.2 }"
                :while-hover="{ scale: 1.05 }"
                class="text-center"
              >
                <div
                  class="text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent"
                >
                  Lv.{{ userProfile.level }}
                </div>
                <div class="text-xs text-slate-500">
                  {{ t("homePage.currentLevel") }}
                </div>
              </motion.div>
            </div>

            <!-- User Menu -->
            <div class="flex items-center gap-2">
              <button
                class="flex items-center gap-2 hover:bg-blue-50 hover:text-blue-700 transition-all duration-200 p-2 text-sm rounded-md"
                @click="onStartTest('profile')"
              >
                <User class="w-4 h-4" />
                {{ userProfile.name }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="container mx-auto px-4 py-8">
      <Tabs :defaultValue="activeTab" class="space-y-8" @click="onTabChange">
        <TabsList
          style="border-radius: 14.5px"
          class-name="grid w-full grid-cols-4 bg-white/70 backdrop-blur-sm border border-slate-200 shadow-sm h-12 p-1"
        >
          <TabsTrigger
            class="flex items-center justify-center gap-2 h-10 px-4 py-2 data-[state=active]:bg-gradient-to-r data-[state=active]:from-slate-600 data-[state=active]:to-gray-700 data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-200"
            value="tests"
          >
            <Play class="w-4 h-4 flex-shrink-0" />
            <span class="leading-none">{{ t("homePage.startTest") }}</span>
          </TabsTrigger>
          <TabsTrigger
            class="flex items-center justify-center gap-2 h-10 px-4 py-2 data-[state=active]:bg-gradient-to-r data-[state=active]:from-purple-600 data-[state=active]:to-indigo-600 data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-200"
            value="ai-battle"
          >
            <Brain class="w-4 h-4 flex-shrink-0" />
            <span class="leading-none">{{ t("homePage.aiBattle") }}</span>
          </TabsTrigger>
          <TabsTrigger
            class="flex items-center justify-center gap-2 h-10 px-4 py-2 data-[state=active]:bg-gradient-to-r data-[state=active]:from-slate-600 data-[state=active]:to-gray-700 data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-200"
            value="dashboard"
          >
            <BarChart3 class="w-4 h-4 flex-shrink-0" />
            <span class="leading-none">{{ t("homePage.dashboard") }}</span>
          </TabsTrigger>
          <TabsTrigger
            class="flex items-center justify-center gap-2 h-10 px-4 py-2 data-[state=active]:bg-gradient-to-r data-[state=active]:from-slate-600 data-[state=active]:to-gray-700 data-[state=active]:text-white data-[state=active]:shadow-md transition-all duration-200"
            value="achievements"
          >
            <Award class="w-4 h-4 flex-shrink-0" />
            <span class="leading-none">{{ t("homePage.achievements") }}</span>
          </TabsTrigger>
        </TabsList>

        <TabsContent class="space-y-8" value="tests">
          <motion.div
            :variants="containerVariants"
            animate="visible"
            initial="hidden"
          >
            <!-- Quick Start Section -->
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
              <div class="lg:col-span-3 space-y-6">
                <!-- Recommended Tests -->
                <motion.div :variants="itemVariants">
                  <Card
                    class="mb-8 bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200"
                  >
                    <CardHeader>
                      <CardTitle class="flex items-center gap-2">
                        <Target class="w-5 h-5 text-blue-600" />
                        {{ t("homePage.recommendedTests") }}
                      </CardTitle>
                      <CardDescription>
                        {{ t("homePage.recommendedTestsDesc") }}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <motion.div
                          v-for="(test, index) in tests.slice(0, 4)"
                          :key="test.id"
                          :animate="{ opacity: 1, scale: 1 }"
                          :initial="{ opacity: 0, scale: 0.9 }"
                          :transition="{ duration: 0.3, delay: index * 0.1 }"
                          :while-hover="{ scale: 1.02 }"
                          :while-tap="{ scale: 0.98 }"
                        >
                          <Card
                            class="h-full bg-white/90 hover:bg-white hover:shadow-lg transition-all duration-300 cursor-pointer group relative overflow-hidden"
                            @click="onStartTest(test.id)"
                          >
                            <CardContent class="p-4">
                              <div class="flex items-start gap-3">
                                <div
                                  :class="`w-10 h-10 rounded-lg ${getIconBackground(
                                    test.color
                                  )} ${getHoverBorder(
                                    test.color
                                  )} flex items-center justify-center shadow-md group-hover:shadow-lg transition-all duration-300`"
                                >
                                  <component
                                    :is="test.icon"
                                    :class="`w-5 h-5 ${test.color} group-hover:scale-110 transition-transform duration-300`"
                                  />
                                </div>
                                <div class="flex-1 min-w-0">
                                  <h3
                                    class="font-semibold mb-1 text-slate-800 group-hover:text-blue-600 transition-colors"
                                  >
                                    {{ test.title }}
                                  </h3>
                                  <p
                                    class="text-sm text-slate-600 mb-2 line-clamp-2"
                                  >
                                    {{ test.description }}
                                  </p>
                                  <div
                                    class="flex items-center justify-between"
                                  >
                                    <Badge
                                      :class="
                                        test.difficulty === '简单'
                                          ? 'bg-green-100 text-green-700 border-green-200'
                                          : test.difficulty === '中等'
                                          ? 'bg-yellow-100 text-yellow-700 border-yellow-200'
                                          : 'bg-red-100 text-red-700 border-red-200'
                                      "
                                      :variant="'outline'"
                                    >
                                      {{ test.difficulty }}
                                    </Badge>
                                    <div
                                      class="flex items-center gap-1 text-xs text-slate-500"
                                    >
                                      <Timer class="w-3 h-3" />
                                      {{ test.duration }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </CardContent>

                            <!-- Hover overlay -->
                            <div
                              class="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                            />
                          </Card>
                        </motion.div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>

                <!-- Test Categories -->
                <motion.div
                  v-for="(
                    [categoryId, category], categoryIndex
                  ) in Object.entries(testCategories)"
                  :key="categoryId"
                  :custom="categoryIndex"
                  :variants="itemVariants"
                >
                  <Card
                    class="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300"
                  >
                    <CardHeader class="border-b border-slate-100">
                      <CardTitle class="flex items-center gap-2">
                        <div
                          :class="`w-3 h-3 rounded-full bg-gradient-to-r ${getBackgroundGradient(
                            category.color
                          )} shadow-sm`"
                        />
                        {{ category.name }}
                      </CardTitle>
                      <CardDescription class="text-slate-600"
                        >{{ category.description }}
                      </CardDescription>
                    </CardHeader>
                    <CardContent class="p-6">
                      <div
                        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
                      >
                        <motion.div
                          v-for="(test, testIndex) in tests.filter(
                            (t) => t.category === categoryId
                          )"
                          :key="test.id"
                          :custom="testIndex"
                          :initial="{ opacity: 1, scale: 1 }"
                          :variants="testCardVariants"
                          :while-hover="'hover'"
                        >
                          <Card
                            class="cursor-pointer bg-white/80 backdrop-blur-sm border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 group"
                            @click="onStartTest(test.id)"
                          >
                            <CardContent class="p-4">
                              <div class="space-y-3">
                                <div class="flex items-start justify-between">
                                  <div
                                    :class="`w-10 h-10 rounded-lg ${getIconBackground(
                                      test.color
                                    )} ${getHoverBorder(
                                      test.color
                                    )} flex items-center justify-center shadow-md group-hover:shadow-lg transition-all duration-300`"
                                  >
                                    <component
                                      :is="test.icon"
                                      :class="`w-5 h-5 ${test.color} group-hover:scale-110 transition-transform duration-300`"
                                    />
                                  </div>
                                  <Badge
                                    v-if="
                                      testResults.some(
                                        (r) => r.testType === test.title
                                      )
                                    "
                                    class="text-xs bg-yellow-100 text-yellow-800 border-yellow-200"
                                    variant="secondary"
                                  >
                                    <Trophy class="w-3 h-3 mr-1" />
                                    {{ t("homePage.completed") }}
                                  </Badge>
                                </div>

                                <div>
                                  <h3
                                    class="font-semibold text-sm text-slate-700 group-hover:text-blue-700 transition-colors duration-300"
                                  >
                                    {{ test.title }}
                                  </h3>
                                  <p
                                    class="text-xs text-slate-500 mb-2 line-clamp-2"
                                  >
                                    {{ test.description }}
                                  </p>

                                  <div
                                    class="flex items-center justify-between"
                                  >
                                    <div class="flex items-center gap-2">
                                      <Badge
                                        class="text-xs border-slate-200 text-slate-600 hover:border-blue-300 hover:text-blue-700 transition-colors duration-300"
                                        variant="outline"
                                      >
                                        {{ test.difficulty }}
                                      </Badge>
                                    </div>
                                    <div
                                      class="flex items-center gap-1 text-xs text-slate-500"
                                    >
                                      <Timer class="w-3 h-3" />
                                      {{ test.duration }}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </CardContent>
                          </Card>
                        </motion.div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              </div>

              <!-- Sidebar -->
              <motion.div :variants="itemVariants" class="space-y-6">
                <!-- User Stats -->
                <Card
                  class="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <CardHeader class="border-b border-slate-100">
                    <CardTitle class="text-base">{{
                      t("homePage.yourStats")
                    }}</CardTitle>
                  </CardHeader>
                  <CardContent class="p-6 space-y-4">
                    <div class="text-center">
                      <Avatar
                        class="w-16 h-16 mx-auto mb-3 ring-4 ring-slate-100 hover:ring-slate-200 transition-all duration-300"
                      >
                        <AvatarFallback
                          class="bg-gradient-to-br from-slate-600 to-gray-700 text-white"
                        >
                          <User class="w-8 h-8" />
                        </AvatarFallback>
                      </Avatar>
                      <h3 class="font-semibold text-slate-700">
                        {{ userProfile.name }}
                      </h3>
                      <p class="text-sm text-slate-500">
                        {{ t("homePage.level") }} {{ userProfile.level }}
                      </p>
                    </div>

                    <div class="space-y-3">
                      <div class="flex justify-between text-sm">
                        <span class="text-slate-600">{{
                          t("homePage.testsCompleted")
                        }}</span>
                        <span class="font-semibold text-slate-700"
                          >{{ testResults.length }}/{{ tests.length }}</span
                        >
                      </div>
                      <Progress
                        :model-value="(testResults.length / tests.length) * 100"
                        class="h-3"
                      />
                    </div>

                    <div class="grid grid-cols-2 gap-3 text-center">
                      <div
                        class="p-3 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg border border-blue-100 hover:shadow-md transition-all duration-300"
                      >
                        <div
                          class="text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
                        >
                          {{ userProfile.averageScore }}
                        </div>
                        <div class="text-xs text-slate-500">
                          {{ t("homePage.avgScore") }}
                        </div>
                      </div>
                      <div
                        class="p-3 bg-gradient-to-br from-orange-50 to-red-50 rounded-lg border border-orange-100 hover:shadow-md transition-all duration-300"
                      >
                        <div
                          class="text-lg font-bold bg-gradient-to-r from-orange-600 to-red-600 bg-clip-text text-transparent"
                        >
                          {{ streakDays }}
                        </div>
                        <div class="text-xs text-slate-500">
                          {{ t("homePage.streakDays") }}
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <!-- Recent Achievements -->
                <Card
                  class="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <CardHeader class="border-b border-slate-100">
                    <CardTitle class="text-base">{{
                      t("homePage.recentAchievements")
                    }}</CardTitle>
                  </CardHeader>
                  <CardContent class="p-6">
                    <div class="space-y-3">
                      <motion.div
                        v-for="achievement in achievements
                          .filter((a) => a.unlocked)
                          .slice(-3)"
                        :key="achievement.id"
                        :transition="{ duration: 0.2 }"
                        :while-hover="{ scale: 1.02, x: 4 }"
                        class="flex items-center gap-3 p-2 rounded-lg hover:bg-yellow-50 transition-colors duration-200"
                      >
                        <div
                          class="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center shadow-sm"
                        >
                          <component
                            :is="achievement.icon"
                            class="w-4 h-4 text-white"
                          />
                        </div>
                        <div class="flex-1">
                          <p class="text-sm font-medium text-slate-700">
                            {{ achievement.name }}
                          </p>
                          <p class="text-xs text-slate-500">
                            {{ achievement.description }}
                          </p>
                        </div>
                      </motion.div>

                      <div
                        v-if="
                          achievements.filter((a) => a.unlocked).length === 0
                        "
                        class="text-center py-6"
                      >
                        <div
                          class="w-12 h-12 mx-auto mb-3 rounded-full bg-slate-100 flex items-center justify-center"
                        >
                          <Trophy class="w-6 h-6 text-slate-400" />
                        </div>
                        <p class="text-sm text-slate-500">
                          {{ t("homePage.unlockAchievementsPrompt") }}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            </div>
          </motion.div>
        </TabsContent>

        <TabsContent value="dashboard">
          <motion.div
            :variants="containerVariants"
            animate="visible"
            initial="hidden"
          >
            <Dashboard
              :achievements="achievements"
              :testResults="testResults"
              :userProfile="userProfile"
              @start-test="onStartTest"
            />
          </motion.div>
        </TabsContent>

        <TabsContent class="space-y-6" value="ai-battle">
          <motion.div
            :variants="containerVariants"
            animate="visible"
            initial="hidden"
          >
            <!-- AI对战统计概览 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
              <Card
                class="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200"
              >
                <CardContent class="p-4">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center"
                    >
                      <Swords class="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <p class="text-sm text-blue-600">
                        {{ t("homePage.aiBattleCount") }}
                      </p>
                      <p class="text-2xl font-bold text-blue-700">
                        {{ aiBattleResults.length }}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card
                class="bg-gradient-to-br from-green-50 to-emerald-50 border-green-200"
              >
                <CardContent class="p-4">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center"
                    >
                      <Trophy class="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <p class="text-sm text-green-600">
                        {{ t("homePage.aiBattleWinRate") }}
                      </p>
                      <p class="text-2xl font-bold text-green-700">
                        {{ aiBattleWinRate }}%
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card
                class="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200"
              >
                <CardContent class="p-4">
                  <div class="flex items-center gap-3">
                    <div
                      class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center"
                    >
                      <Crown class="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <p class="text-sm text-purple-600">
                        {{ t("homePage.currentRank") }}
                      </p>
                      <p class="text-2xl font-bold text-purple-700">#42</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            <!-- AI对战介绍卡片 -->
            <Card
              class="mb-6 bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 border-blue-200 overflow-hidden"
            >
              <CardHeader class="relative">
                <div
                  class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full opacity-10 transform translate-x-16 -translate-y-8"
                ></div>
                <CardTitle
                  class="flex items-center gap-3 text-2xl text-blue-700 relative z-10"
                >
                  <motion.div
                    :animate="{ rotate: [0, 10, -10, 0] }"
                    :transition="{
                      duration: 2,
                      repeat: Infinity,
                      ease: 'easeInOut',
                    }"
                  >
                    <Swords class="w-7 h-7" />
                  </motion.div>
                  {{ t("homePage.aiBattleCenter") }}
                  <motion.div
                    :animate="{ scale: [1, 1.2, 1] }"
                    :transition="{
                      duration: 1.5,
                      repeat: Infinity,
                      ease: 'easeInOut',
                    }"
                  >
                    <Sparkles class="w-5 h-5 text-yellow-500" />
                  </motion.div>
                </CardTitle>
                <CardDescription class="text-base text-blue-600">
                  {{ t("homePage.aiBattleCenterDesc") }}
                </CardDescription>
              </CardHeader>
              <CardContent class="space-y-4">
                <div class="grid md:grid-cols-3 gap-4">
                  <div class="space-y-2">
                    <h4
                      class="font-semibold flex items-center gap-2 text-blue-700"
                    >
                      <Gamepad2 class="w-4 h-4" />
                      {{ t("homePage.soloBattle") }}
                    </h4>
                    <ul class="text-sm space-y-1 text-muted-foreground">
                      <li class="flex items-center gap-2">
                        <Zap class="w-3 h-3 text-yellow-500" />
                        {{ t("homePage.soloBattleDesc1") }}
                      </li>
                      <li class="flex items-center gap-2">
                        <Timer class="w-3 h-3 text-blue-500" />
                        {{ t("homePage.soloBattleDesc2") }}
                      </li>
                      <li class="flex items-center gap-2">
                        <Target class="w-3 h-3 text-green-500" />
                        {{ t("homePage.soloBattleDesc3") }}
                      </li>
                    </ul>
                  </div>
                  <div class="space-y-2">
                    <h4
                      class="font-semibold flex items-center gap-2 text-blue-700"
                    >
                      <Users class="w-4 h-4" />
                      {{ t("homePage.teamBattle") }}
                    </h4>
                    <ul class="text-sm space-y-1 text-muted-foreground">
                      <li class="flex items-center gap-2">
                        <Star class="w-3 h-3 text-purple-500" />
                        {{ t("homePage.teamBattleDesc1") }}
                      </li>
                      <li class="flex items-center gap-2">
                        <Brain class="w-3 h-3 text-indigo-500" />
                        {{ t("homePage.teamBattleDesc2") }}
                      </li>
                      <li class="flex items-center gap-2">
                        <Award class="w-3 h-3 text-green-500" />
                        {{ t("homePage.teamBattleDesc3") }}
                      </li>
                    </ul>
                  </div>
                  <div class="space-y-2">
                    <h4
                      class="font-semibold flex items-center gap-2 text-blue-700"
                    >
                      <Trophy class="w-4 h-4" />
                      {{ t("homePage.rankingSystem") }}
                    </h4>
                    <ul class="text-sm space-y-1 text-muted-foreground">
                      <li class="flex items-center gap-2">
                        <Crown class="w-3 h-3 text-yellow-500" />
                        {{ t("homePage.rankingSystemDesc1") }}
                      </li>
                      <li class="flex items-center gap-2">
                        <Flame class="w-3 h-3 text-red-500" />
                        {{ t("homePage.rankingSystemDesc2") }}
                      </li>
                      <li class="flex items-center gap-2">
                        <BarChart3 class="w-3 h-3 text-purple-500" />
                        {{ t("homePage.rankingSystemDesc3") }}
                      </li>
                    </ul>
                  </div>
                </div>

                <motion.div
                  :while-hover="{ scale: 1.02 }"
                  :while-tap="{ scale: 0.98 }"
                >
                  <button
                    class="w-full py-3 px-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all duration-300 rounded-lg"
                    @click="onStartTest('ai-battle')"
                  >
                    <div class="flex items-center gap-3 justify-center">
                      <motion.div
                        :animate="{ rotate: 360 }"
                        :transition="{
                          duration: 2,
                          repeat: Infinity,
                          ease: 'linear',
                        }"
                      >
                        <Gamepad2 class="w-5 h-5" />
                      </motion.div>
                      <span class="font-semibold">{{
                        t("homePage.enterAIBattleCenter")
                      }}</span>
                      <motion.div
                        :animate="{ x: [0, 5, 0] }"
                        :transition="{
                          duration: 1.5,
                          repeat: Infinity,
                          ease: 'easeInOut',
                        }"
                      >
                        <Swords class="w-4 h-4" />
                      </motion.div>
                    </div>
                  </button>
                </motion.div>
              </CardContent>
            </Card>

            <!-- AI对手预览和最近战绩 -->
            <div class="grid lg:grid-cols-2 gap-6">
              <!-- AI角色预览 -->
              <Card
                class="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg"
              >
                <CardHeader>
                  <CardTitle class="flex items-center gap-2">
                    <Bot class="w-5 h-5 text-blue-600" />
                    {{ t("homePage.aiOpponentLineup") }}
                  </CardTitle>
                  <CardDescription>{{
                    t("homePage.aiOpponentLineupDesc")
                  }}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div class="grid grid-cols-2 gap-4">
                    <motion.div
                      v-for="(ai, index) in aiOpponents"
                      :key="ai.name"
                      :animate="{ opacity: 1, scale: 1 }"
                      :initial="{ opacity: 0, scale: 0.9 }"
                      :transition="{ delay: index * 0.1 }"
                      class="group"
                    >
                      <Card
                        class="text-center p-3 hover:shadow-lg transition-all duration-300 group-hover:scale-105 bg-white/80 backdrop-blur-sm"
                      >
                        <div
                          class="text-2xl mb-2 group-hover:scale-110 transition-transform"
                        >
                          {{ ai.emoji }}
                        </div>
                        <h3 class="font-semibold text-sm text-slate-700">
                          {{ ai.name }}
                        </h3>
                        <p class="text-xs text-slate-500 mb-2">{{ ai.desc }}</p>
                        <div class="flex items-center justify-center gap-1">
                          <Star
                            v-for="i in ai.level"
                            :key="i"
                            class="w-2 h-2 fill-yellow-400 text-yellow-400"
                          />
                        </div>
                        <div
                          :class="`mt-2 h-1 rounded-full bg-gradient-to-r ${ai.color} opacity-60`"
                        ></div>
                      </Card>
                    </motion.div>
                  </div>
                </CardContent>
              </Card>

              <!-- 最近战绩 -->
              <Card
                class="bg-white/70 backdrop-blur-sm border-slate-200 shadow-lg"
              >
                <CardHeader>
                  <CardTitle class="flex items-center gap-2">
                    <BarChart3 class="w-5 h-5 text-green-600" />
                    {{ t("homePage.recentMatches") }}
                  </CardTitle>
                  <CardDescription>{{
                    t("homePage.recentMatchesDesc")
                  }}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div v-if="aiBattleResults.length > 0" class="space-y-3">
                    <div
                      v-for="(result, index) in testResults
                        .filter((r) => r.details?.battleMode)
                        .slice(-5)
                        .reverse()"
                      :key="index"
                      class="flex items-center justify-between p-3 bg-slate-50 rounded-lg"
                    >
                      <div class="flex items-center gap-3">
                        <Badge
                          :variant="
                            result.details?.winner === 'player'
                              ? 'default'
                              : 'destructive'
                          "
                          class="w-6 h-6 p-0 flex items-center justify-center text-xs"
                        >
                          {{ result.details?.winner === "player" ? "W" : "L" }}
                        </Badge>
                        <div>
                          <p class="font-medium text-sm">
                            {{ result.testType }}
                          </p>
                          <p class="text-xs text-slate-500">
                            {{
                              new Date(result.date).toLocaleDateString(
                                "zh-CN",
                                { month: "short", day: "numeric" }
                              )
                            }}
                          </p>
                        </div>
                      </div>
                      <div class="text-right">
                        <p class="font-semibold text-sm">{{ result.score }}</p>
                        <p class="text-xs text-slate-500">
                          {{ t("homePage.score") }}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div v-else class="text-center py-6 text-slate-500">
                    <Gamepad2 class="w-12 h-12 mx-auto mb-3 opacity-50" />
                    <p class="text-sm">{{ t("homePage.noMatches") }}</p>
                    <p class="text-xs">{{ t("homePage.startFirstMatch") }}</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        </TabsContent>

        <TabsContent class="space-y-6" value="achievements">
          <motion.div
            :variants="containerVariants"
            animate="visible"
            initial="hidden"
          >
            <!-- 成就徽章标题和统计 -->
            <motion.div :variants="itemVariants" class="text-center mb-8">
              <h2
                class="text-3xl font-bold mb-2 bg-gradient-to-r from-yellow-500 via-amber-500 to-orange-500 bg-clip-text text-transparent"
              >
                {{ t("homePage.achievementBadges") }}
              </h2>
              <p class="text-slate-600 mb-6">
                {{
                  t("homePage.unlockedAchievementsCount", {
                    unlockedCount: achievements.filter((a) => a.unlocked)
                      .length,
                    totalCount: achievements.length,
                  })
                }}
              </p>
              <div class="flex justify-center">
                <div
                  class="w-80 p-4 bg-white/70 backdrop-blur-sm rounded-xl border border-slate-200 shadow-lg"
                >
                  <Progress
                    :value="
                      (achievements.filter((a) => a.unlocked).length /
                        achievements.length) *
                      100
                    "
                    class="h-3"
                  />
                </div>
              </div>
            </motion.div>

            <!-- 成就分类 -->
            <div class="space-y-8">
              <!-- 已解锁成就 -->
              <motion.div :variants="itemVariants">
                <h3 class="text-xl font-semibold mb-6 flex items-center gap-2">
                  <div
                    class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center shadow-sm"
                  >
                    <Trophy class="w-5 h-5 text-white" />
                  </div>
                  {{ t("homePage.unlockedAchievements") }} ({{
                    achievements.filter((a) => a.unlocked).length
                  }})
                </h3>
                <div
                  class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
                >
                  <motion.div
                    v-for="(achievement, index) in achievements.filter(
                      (a) => a.unlocked
                    )"
                    :key="achievement.id"
                    :custom="index"
                    :variants="achievementVariants"
                    :while-hover="'hover'"
                  >
                    <Card
                      class="bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50 border-yellow-200 shadow-lg hover:shadow-xl transition-all duration-300"
                    >
                      <CardContent class="p-6 text-center h-full flex flex-col">
                        <motion.div
                          :while-hover="{
                            scale: 1.1,
                            rotate: 5,
                            transition: { duration: 0.2 },
                          }"
                          class="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center bg-gradient-to-br from-yellow-400 to-amber-500 text-white shadow-lg"
                        >
                          <component :is="achievement.icon" class="w-8 h-8" />
                        </motion.div>
                        <div class="flex-1 flex flex-col justify-between">
                          <div>
                            <h3 class="font-semibold mb-2 text-yellow-800">
                              {{ achievement.name }}
                            </h3>
                            <p class="text-sm text-slate-600 mb-4 line-clamp-3">
                              {{ achievement.description }}
                            </p>
                          </div>
                          <div>
                            <Badge
                              class="bg-yellow-100 text-yellow-800 border-yellow-200 mb-2"
                              variant="secondary"
                            >
                              {{ t("homePage.unlocked") }}
                            </Badge>
                            <p
                              v-if="achievement.unlockedDate"
                              class="text-xs text-slate-500"
                            >
                              {{
                                new Date(
                                  achievement.unlockedDate
                                ).toLocaleDateString("zh-CN")
                              }}
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                </div>
              </motion.div>

              <!-- 未解锁成就 -->
              <motion.div
                v-if="achievements.filter((a) => !a.unlocked).length > 0"
                :variants="itemVariants"
              >
                <h3 class="text-xl font-semibold mb-6 flex items-center gap-2">
                  <div
                    class="w-8 h-8 rounded-lg bg-slate-200 flex items-center justify-center"
                  >
                    <Award class="w-5 h-5 text-slate-500" />
                  </div>
                  {{ t("homePage.lockedAchievements") }} ({{
                    achievements.filter((a) => !a.unlocked).length
                  }})
                </h3>
                <div
                  class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
                >
                  <motion.div
                    v-for="(achievement, index) in achievements.filter(
                      (a) => !a.unlocked
                    )"
                    :key="achievement.id"
                    :animate="{ opacity: 1, scale: 1 }"
                    :custom="index"
                    :initial="{ opacity: 0, scale: 0.9 }"
                    :transition="{ delay: index * 0.1 }"
                    :variants="achievementVariants"
                    :while-hover="'hover'"
                  >
                    <Card
                      class="opacity-70 bg-white/50 backdrop-blur-sm border-slate-200 hover:opacity-90 hover:shadow-lg transition-all duration-300"
                    >
                      <CardContent class="p-6 text-center h-full flex flex-col">
                        <div
                          class="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center bg-slate-200 text-slate-500"
                        >
                          <component :is="achievement.icon" class="w-8 h-8" />
                        </div>
                        <div class="flex-1 flex flex-col justify-between">
                          <div>
                            <h3 class="font-semibold mb-2 text-slate-700">
                              {{ achievement.name }}
                            </h3>
                            <p class="text-sm text-slate-500 mb-4 line-clamp-3">
                              {{ achievement.description }}
                            </p>
                          </div>
                          <Badge
                            class="border-slate-300 text-slate-600"
                            variant="outline"
                          >
                            {{ t("homePage.locked") }}
                          </Badge>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                </div>
              </motion.div>

              <!-- 空状态 -->
              <div v-if="achievements.length === 0" class="text-center py-16">
                <div
                  class="w-20 h-20 mx-auto mb-6 rounded-full bg-slate-100 flex items-center justify-center"
                >
                  <Award class="w-10 h-10 text-slate-400" />
                </div>
                <h3 class="text-xl font-semibold mb-2 text-slate-700">
                  {{ t("homePage.noAchievements") }}
                </h3>
                <p class="text-slate-500">
                  {{ t("homePage.getYourFirstAchievement") }}
                </p>
              </div>
            </div>
          </motion.div>
        </TabsContent>
      </Tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import {
  Brain,
  Trophy,
  Timer,
  Play,
  BarChart3,
  Award,
  Lightbulb,
  User,
  Sword,
  Bot,
  Zap,
  Crown,
  Flame,
  Star,
  Sparkles,
  Gamepad2,
  Swords,
  Users,
  Target,
} from "lucide-vue-next";
import { motion } from "motion-v";
import Dashboard from "../components/Dashboard.vue";
import { getTests, getTestCategories } from "../constants/tests";
import {
  calculateStreakDays,
  checkAchievements,
  updateUserStats,
} from "../utils/aceievements.js";
import TabsList from "@/components/TabsList.vue";
import Tabs from "@/components/Tabs.vue";
import TabsContent from "@/components/TabsContent.vue";
import TabsTrigger from "@/components/TabsTrigger.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const tests = computed(() => getTests(t));
const testCategories = computed(() => getTestCategories(t));

const aiOpponents = computed(() => [
  {
    name: "R.O.O.K.I.E",
    emoji: "🤖",
    level: 1,
    desc: t("homePage.rookie"),
    color: "from-green-400 to-green-600",
  },
  {
    name: t("homePage.strategist"),
    emoji: "🧠",
    level: 2,
    desc: t("homePage.logicalThinker"),
    color: "from-blue-400 to-blue-600",
  },
  {
    name: t("homePage.flash"),
    emoji: "⚡",
    level: 3,
    desc: t("homePage.quickReaction"),
    color: "from-yellow-400 to-orange-600",
  },
  {
    name: t("homePage.ultimateBrain"),
    emoji: "👑",
    level: 4,
    desc: t("homePage.allRounder"),
    color: "from-purple-400 to-pink-600",
  },
]);

const props = defineProps({
  testResults: {
    type: Array,
    default: () => [],
  },
  userProfile: {
    type: Object,
    default: () => ({
      name: "",
      level: 1,
      averageScore: 0,
      totalTests: 0,
    }),
  },
  achievements: {
    type: Array,
    default: () => [],
  },
  activeTab: {
    type: String,
    default: "tests",
  },
});

const emit = defineEmits(["start-test", "update:activeTab"]);

const streakDays = computed(() => calculateStreakDays(props.testResults));

const aiBattleResults = computed(() =>
  props.testResults.filter((r) => r.details?.battleMode)
);
const aiBattleWins = computed(
  () =>
    aiBattleResults.value.filter((r) => r.details?.winner === "player").length
);
const aiBattleWinRate = computed(() =>
  aiBattleResults.value.length > 0
    ? Math.round((aiBattleWins.value / aiBattleResults.value.length) * 100)
    : 0
);

const getIconBackground = (color) => {
  const colorMap = {
    "text-yellow-500":
      "bg-gradient-to-br from-yellow-50 to-yellow-100 border border-yellow-200/60",
    "text-blue-500":
      "bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200/60",
    "text-purple-500":
      "bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200/60",
    "text-green-500":
      "bg-gradient-to-br from-green-50 to-green-100 border border-green-200/60",
    "text-red-500":
      "bg-gradient-to-br from-red-50 to-red-100 border border-red-200/60",
    "text-pink-500":
      "bg-gradient-to-br from-pink-50 to-pink-100 border border-pink-200/60",
    "text-indigo-500":
      "bg-gradient-to-br from-indigo-50 to-indigo-100 border border-indigo-200/60",
    "text-orange-500":
      "bg-gradient-to-br from-orange-50 to-orange-100 border border-orange-200/60",
    "text-teal-500":
      "bg-gradient-to-br from-teal-50 to-teal-100 border border-teal-200/60",
    "text-cyan-500":
      "bg-gradient-to-br from-cyan-50 to-cyan-100 border border-cyan-200/60",
    "text-amber-500":
      "bg-gradient-to-br from-amber-50 to-amber-100 border border-amber-200/60",
    "text-rose-500":
      "bg-gradient-to-br from-rose-50 to-rose-100 border border-rose-200/60",
    "text-violet-500":
      "bg-gradient-to-br from-violet-50 to-violet-100 border border-violet-200/60",
    "text-emerald-500":
      "bg-gradient-to-br from-emerald-50 to-emerald-100 border border-emerald-200/60",
    "text-sky-500":
      "bg-gradient-to-br from-sky-50 to-sky-100 border border-sky-200/60",
  };
  return (
    colorMap[color] ||
    "bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200/60"
  );
};

const getHoverBorder = (color) => {
  const hoverMap = {
    "text-yellow-500": "group-hover:border-yellow-300/80",
    "text-blue-500": "group-hover:border-blue-300/80",
    "text-purple-500": "group-hover:border-purple-300/80",
    "text-green-500": "group-hover:border-green-300/80",
    "text-red-500": "group-hover:border-red-300/80",
    "text-pink-500": "group-hover:border-pink-300/80",
    "text-indigo-500": "group-hover:border-indigo-300/80",
    "text-orange-500": "group-hover:border-orange-300/80",
    "text-teal-500": "group-hover:border-teal-300/80",
    "text-cyan-500": "group-hover:border-cyan-300/80",
    "text-amber-500": "group-hover:border-amber-300/80",
    "text-rose-500": "group-hover:border-rose-300/80",
    "text-violet-500": "group-hover:border-violet-300/80",
    "text-emerald-500": "group-hover:border-emerald-300/80",
    "text-sky-500": "group-hover:border-sky-300/80",
  };
  return hoverMap[color] || "group-hover:border-slate-300/80";
};

const getBackgroundGradient = (textColor) => {
  const gradientMap = {
    "text-blue-500": "from-blue-400 to-blue-600",
    "text-green-500": "from-green-400 to-green-600",
    "text-purple-500": "from-purple-400 to-purple-600",
    "text-yellow-500": "from-yellow-400 to-yellow-600",
    "text-red-500": "from-red-400 to-red-600",
    "text-pink-500": "from-pink-400 to-pink-600",
    "text-indigo-500": "from-indigo-400 to-indigo-600",
    "text-orange-500": "from-orange-400 to-orange-600",
    "text-teal-500": "from-teal-400 to-teal-600",
    "text-cyan-500": "from-cyan-400 to-cyan-600",
    "text-emerald-500": "from-emerald-400 to-emerald-600",
  };
  return gradientMap[textColor] || "from-slate-400 to-slate-600";
};

const containerVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.6,
      ease: "easeOut",
      staggerChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.5,
      ease: "easeOut",
    },
  },
};

const achievementVariants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.4,
      ease: "easeOut",
    },
  },
  hover: {
    scale: 1.05,
    transition: {
      duration: 0.2,
      ease: "easeOut",
    },
  },
};

const testCardVariants = {
  hidden: { opacity: 0, scale: 0.95 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.4,
      ease: "easeOut",
    },
  },
  hover: {
    scale: 1.02,
    y: -4,
    transition: {
      duration: 0.2,
      ease: "easeOut",
    },
  },
};

const onStartTest = (testType) => {
  emit("start-test", testType);
};
console.log("activeTab", props.activeTab);
const onTabChange = (tab) => {
  console.log(222222);

  emit("update:activeTab", tab);
};
</script>
